<template>
  <div id="mine-withdraw">
    <grey-header title="提现银行卡"></grey-header>
    <router-link to="/bank-account-list?link=/mine/mine-withdraw" tag="section">
      <p>{{ accountInfo.bank }}</p>
      <p>
        <span>****</span>
        <span>****</span>
        <span>****</span>
        {{ accountInfo.number | formatAccount }}
      </p>
      <span>></span>
    </router-link>
    <grey-header title="提现金额"></grey-header>
    <article>
      <label for="actualNum">&yen;</label>
      <input
        id="actualNum"
        name="提现金额"
        v-validate="'required|decimal:1|min_value:11'"
        type="text"
        v-model="actualNum">
      <span v-show="VeeErrors.has('提现金额')">{{ VeeErrors.first('提现金额') }}</span>
    </article>
    <p>可提现金额：{{ balance }} 元</p>
    <button class="public-single-btn" @click="withdraw">立即提现</button>
    <router-link tag="h4" to="/mine/mine-withdraw-detail">查看提现流水</router-link>

    <h5>备注：</h5>
    <p class="tips">1. 提现时间：每天8:00-22:00；节假日暂停。</p>
    <p class="tips">2. 提现账户：暂不支持外资银行，请尽量使用国内主流银行，部分偏远地区的农村信用合作社到账会有问题。</p>
    <p class="tips">3. 每笔提现手续费 1 元，于本账户内代扣。（11元起提，例如提现11元，到账10元）</p>
  </div>
</template>

<script>
  import { MessageBox } from 'mint-ui';
  import BANKS from '../../assets/scripts/BANK';
  import GreyHeader from '../comp/grey-header.vue';
  export default {
    name: "mine-withdraw",
    components: {
      GreyHeader
    },
    data() {
      return {
        accountInfo: {
          owner: '',
          bank: '',
          code: '',
          number: '',
          IDNumber: ''
        },
        balance: '',
        actualNum: ''
      }
    },
    methods: {
      refreshBalance() {
        this.$http.post({
          api: this.$api.USER_WITHDRAW_LEFT,
          params: {
            user_id: localStorage.getItem('id')
          },
          success: (res) => {
            this.balance = res.data.data.balance;
          }
        });
      },
      withdraw() {
        this.$validator.validateAll().then((result) => {
          if (result) {
            MessageBox.prompt('请输入提现密码').then(({ value, action }) => {
              if (action === 'confirm') {
                this.$http.post({
                  api: this.$api.USER_WITHDRAW,
                  params: {
                    user_id: localStorage.getItem('id'),
                    id: this.accountInfo.IDNumber,
                    amount: this.actualNum,
                    account_no: this.accountInfo.number,
                    account_name: this.accountInfo.owner,
                    bank_code: this.accountInfo.code,
                    password: value
                  },
                  success: (res) => {
                    MessageBox.alert('提现成功').then(action => {
                      if (action === 'confirm') {
                        this.$router.push('/mine/mine-profit');
                      }
                    });
                  }
                });

                setTimeout(() => {
                  this.refreshBalance();
                }, 1000);
              }
            });
          }
        })
      }
    },
    created() {
      if (localStorage.getItem('account_number')) {
        let accountInfo = this.$tool.qs.parse(localStorage.getItem('account_number'));
        let index = this.$route.query.card || 0;

        this.accountInfo.code = accountInfo[index].bank;
        this.accountInfo.number = accountInfo[index].number;
        this.accountInfo.owner = accountInfo[index].name;
        this.accountInfo.IDNumber = accountInfo[index].id_number;

        this.accountInfo.bank = BANKS.total[this.accountInfo.code];
      }

      this.refreshBalance();
    }
  }
</script>

<style scoped lang="scss">

  #mine-withdraw {

    >section {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 9rem;
      padding: 1.8rem 0;
      background: $white;

      >p {
        color: #333;
        padding-left: 2rem;

        &:nth-of-type(1) {
          font-size: 1.8rem;
        }

        &:nth-of-type(2) {
          display: flex;
          align-items: center;
          font-size: 1.5rem;

          >span {
            font-size: 2rem;
            margin-right: 1rem;
          }
        }
      }

      >span {
        position: absolute;
        top: 0;
        right: 1.6rem;
        display: flex;
        align-items: center;
        height: $size-as-parent;
        font-size: 2.4rem;
        color: #999;
      }
    }

    >article {

      $input-height: 5rem;

      position: relative;
      display: flex;
      height: $input-height;
      padding-left: 1rem;
      background: $white;

      >label {
        font-size: 1.8rem;
        line-height: $input-height;
        font-weight: bold;
        color: #333;
      }

      >input {
        flex: 1;
        height: $size-as-parent;
        font-size: 1.5rem;
        color: #333;
        padding-left: 1.6rem;
      }

      >span {
        position: absolute;
        top: $size-as-parent;
        right: 0;
        color: #e4393c;
      }
    }

    >p {
      font-size: 1rem;
      color: #999;
      padding: .6rem;
    }

    >button {
      margin: 2.6rem auto;
    }

    >h4 {
      font-size: 1.2rem;
      color: #333;
      text-align: center;
    }

    >h5, .tips {
      padding: .6rem;
    }
  }
</style>
